<template>
    <div class="app-container">
        <van-nav-bar title="推送设置"/>
        
        <div class="setting-container">
            <div class="app-header padlr16">我的策略</div>
            <div class="app-desc padlr16">注：已经订阅信号的用户，可以在下面配置推送开关，开关有俩种，一种是策略总开关，关闭后对应策略将不会在推送，一种是周期开关设置，关闭对应时间周期，对应时间的信号将不会推送。请根据自己需要，合理控制开关。</div>
            <van-tabs v-model:active="active"  sticky @click-tab="handleClickTab">
                <van-tab 
                    v-for="item in pushStateList" 
                    :title="`策略${item.id}`" 
                    :key="item.id"
                >
                    <div class="tab-content">
                        <div class="strategy-list">
                            <div class="strategy-item strategy-name">
                                <div class="strategy-label">策略名称</div>
                                <div class="strategy-result">{{  item.strategyName }}</div>
                            </div>
                            <div class="strategy-item strategy-status">
                                <div class="strategy-label">策略状态</div>
                                <div class="strategy-result">{{  item.leftDays ? '订阅中' : '未订阅' }}</div>
                            </div>
                            <div class="strategy-item strategy-status">
                                <div class="strategy-label">订阅剩余</div>
                                <div class="strategy-result">
                                    <span v-if="item.leftDays">{{  `${item.leftDays}天` }}</span>
                                    <span v-else style="color: red">已过期</span>
                                    <van-button class="expire" type="primary" size="small" @click="$router.push('/setting/vipcenter')">续订</van-button>
                                    
                                </div>
                            </div>
                            <template v-if="item.leftDays">
                                <div class="strategy-item strategy-status">
                                    <div class="strategy-label">策略推送设置</div>
                                    <div class="strategy-result">
                                        <van-switch :model-value="item.open" size="20px" 
                                            @update:model-value="handleChangeOpen"
                                            @click="handleSwitchClick(item)"
                                        />
                                    </div>
                                </div>
                                
                                <div class="strategy strategy-time" v-if="item.id === 1">
                                    <div class="strategy-label">周期推送设置</div>
                                    <div class="time-check time-flex" >
                                        <van-checkbox 
                                            class="checkbox-item"
                                            shape="square"  
                                            direction="horizontal" 
                                            icon-size="14"
                                            v-model="checkedChange"
                                            disabled
                                        >4小时</van-checkbox>
                                        <span class="check-tip">异动策略只有4h周期，无法进行周期配置</span>
                                    </div>
                                </div>
                                <div class="strategy-item strategy-time" v-else-if="[2,3,4].includes(item.id)">
                                    <div class="strategy-label">周期推送设置</div>
                                    <div class="strategy-result">
                                        <van-button class="expire" type="primary" size="small" @click="handleOpenDialogSet(item)">去设置</van-button>
                                    </div>
                                </div>
                                <div class="strategy strategy-time" v-else-if="item.id === 4"></div>
                                <div class="strategy strategy-time" v-else-if="item.id === 5">
                                    <div class="strategy-label">周期推送设置</div>
                                    <div class="time-check time-flex" >
                                        <van-checkbox 
                                            class="checkbox-item"
                                            shape="square"  
                                            direction="horizontal" 
                                            icon-size="14"
                                            v-model="checkedChange"
                                            disabled
                                        >12小时</van-checkbox>
                                        <van-checkbox 
                                            style="margin-left: 10px;"
                                            class="checkbox-item"
                                            shape="square"  
                                            direction="horizontal" 
                                            icon-size="14"
                                            v-model="checkedChange"
                                            disabled
                                        >日线</van-checkbox>
                                        <span class="check-tip">无法更改配置</span>
                                    </div>
                                </div>
                            </template>

                            
                            
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
            <div class="kefu-tip">推送设置任何问题可<span class="maincolor" @click="$router.push('/setting/kefu')">联系客服</span></div>
            
        </div>
        <van-action-sheet v-model:show="showPicker" title="周期推送设置" @open="getTimeCheckList">
            <div class="dialog-set">
                <div class="app-desc">温馨提醒：本策略时间周期默认配置是胜率最高的配置，不建议进行配置更改，消息面会干扰量化信号的大周期，所以遇到消息面，可以打开5分钟来临时应变。</div>
                <van-row>
                    <van-col span="8" v-for="item in showColumns" :key="item.value"  style="margin-bottom: 20px;">
                        <van-checkbox shape="square" v-model="item.select">{{ item.text
                        }}</van-checkbox>
                    </van-col>
                </van-row>
                <div class="dialog-footer">
                    <van-button class="dialog-save" size="small" type="primary"  @click="handleSaveTime">保存</van-button>
                </div>
                
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
// import { mapState } from 'pinia'
import { showToast, showSuccessToast } from 'vant'
import ClipboardJS from 'clipboard'
import { getPushStateList, pushStateUpdate } from '@/api/user';
import { showConfirmDialog } from 'vant';
// import { useUserStore } from '@/store/user'
// import { getWxAppInfo } from '@/api/home'
import { getSettingPush, settingPushUpdate } from '@/api/push'
export default {
    name: 'Setting',
    props: {},
    data() {
        return {
            loadding: false,
            showPicker: false,
            showColumns: [],
            columns: [
                { text: '5分钟', value: '1', select: false },
                { text: '15分钟', value: '2', select: false },
                { text: '30分钟', value: '3', select: false },
                { text: '1小时', value: '4', select: false },
                { text: '2小时', value: '7', select: false },
                { text: '4小时', value: '5', select: false },
                { text: '6小时', value: '8', select: false },
                { text: '12小时', value: '9', select: false },
                { text: '日线', value: '6', select: false },
            ],
            checkedChange: true,
            currentStrategy: {},
            pushStateList: [],
            checked: false,
            activeNames: ['1']
        };
    },
    components: {
    },
    created() {
        this.setCopy()
        this.getPushStateList();
    },
    computed: {
        // ...mapState(useUserStore, ['wxOpenId']),
    },
    methods: {
        handleOpenDialogSet(item) {
            switch (item.id) {
                case 2:
                    this.showColumns = [
                        { text: '5分钟', value: '1', select: false },
                        { text: '15分钟', value: '2', select: false },
                        { text: '30分钟', value: '3', select: false },
                        { text: '1小时', value: '4', select: false },
                        { text: '2小时', value: '7', select: false },
                        { text: '4小时', value: '5', select: false },
                        // { text: '6小时', value: '8', select: false },
                        { text: '12小时', value: '9', select: false },
                        { text: '日线', value: '6', select: false },
                    ];
                    break;
                case 3: 
                    this.showColumns = [
                        { text: '5分钟', value: '1', select: false },
                        { text: '15分钟', value: '2', select: false },
                        // { text: '30分钟', value: '3', select: false },
                        // { text: '1小时', value: '4', select: false },
                        { text: '2小时', value: '7', select: false },
                        { text: '4小时', value: '5', select: false },
                        { text: '6小时', value: '8', select: false },
                        // { text: '12小时', value: '9', select: false },
                        // { text: '日线', value: '6', select: false },
                    ];
                    break;
                case 4: 
                    this.showColumns = [
                        { text: '5分钟', value: '1', select: false },
                        { text: '15分钟', value: '2', select: false },
                        { text: '30分钟', value: '3', select: false },
                        { text: '1小时', value: '4', select: false },
                        // { text: '2小时', value: '7', select: false },
                        // { text: '4小时', value: '5', select: false },
                        // { text: '6小时', value: '8', select: false },
                        // { text: '12小时', value: '9', select: false },
                        // { text: '日线', value: '6', select: false },
                    ];
                    break;
                default:
                    break;
            }
            this.showPicker = true;
        },
        getPushStateList() {
            getPushStateList().then(res => {
                console.log('getPushStateList=====获取用户开通的策略end', res);
                if (res.code === 20000) {
                    res.data.forEach(item => {
                        item.open = !!item.open;
                    });
                    this.pushStateList = res.data;
                }
            })

            // if (!this.wxOpenId) {
            //     getWxAppInfo().then(response => {
            //         if (response.success && response.data != null) {
            //             const data = response.data
            //             const appid = data.appId
            //             const host = location.href.split('#')[0] + 'wx/redirect/' + appid
            //             const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(host) + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
            //             location.href = url
            //         }
            //     })
            // }
        },
        getTimeCheckList() {
            console.log("=======", this.currentStrategy)
            getSettingPush({
                strategyId: this.currentStrategy.id, 
            }).then(res => {
                if (res.code === 20000) {
                    if (!res.data.periodValue) return;
                    const data = res.data.periodValue.split(',')
                    this.showColumns.forEach(item => {
                        if (data.includes(item.value)) {
                            item.select = true;
                        } else {
                            item.select = false;
                        }
                    })
                }
            })
            // getPushState().then((res) => {
            //     if (res.code === 20000) {
            //         if (!res.data) return;
            //         const data = res.data.split(',')

            //         this.columns.forEach(item => {
            //             if (data.includes(item.value)) {
            //                 item.select = true;
            //             } else {
            //                 item.select = false;
            //             }
            //         })
            //     }

            // })
        },
        handleSaveTime() {
            const selectsStr = this.showColumns.filter(item => item.select).map(m => m.value).join(',');
            settingPushUpdate({
                strategyId: this.currentStrategy.id,
                periods: selectsStr,
            }).then((res) => {
                if (res.code === 20000) {
                    showToast('周期推送配置修改成功')
                    this.showPicker = false
                } 
            }).catch(() => { 
            })
        },
        setCopy() {
            let clipborad = new ClipboardJS('#copyUrl')
            //复制成功
            clipborad.on('success', function () {
                showSuccessToast('复制成功')
            })
            //复制失败
            clipborad.on('error', function () {
                showToast('复制失败')
            })
        },
        handleClickTab(value) {
            this.currentStrategy = this.pushStateList[value.name];

        },
        
        handleSwitchClick(item) {
            this.currentStrategy = item;
        },
        handleChangeOpen(value) {
            console.log(value)
            if (!value) {
                // 关闭的时候给对应提示
                showConfirmDialog({
                        title: '温馨提示',
                        message: '关闭策略后，公众号将不在推送该策略，想要收到实时推送，请重新打开。',
                    }).then(() => {
                        console.log('=====', this.currentStrategy)
                        this.$nextTick(() => {
                            pushStateUpdate({
                                strategyId: this.currentStrategy.id,
                                status: value ? 1 : 0,
                            }).then(res => {
                                if (res.code === 20000) {
                                    showSuccessToast('推送已经关闭');
                                    this.currentStrategy.open = false;
                                }
                            })
                        })
                    });
                
            } else {
                this.$nextTick(() => {
                    pushStateUpdate({
                        strategyId: this.currentStrategy.id,
                        status: value ? 1 : 0,
                    }).then(res => {
                        if (res.code === 20000) {
                            showSuccessToast('推送已经打开');
                            this.currentStrategy.open = true;
                        }
                    })
                });
               
            }
        
        },
        handleShare() {
            
        }
    }
};
</script>
<style lang="less" scoped>
.setting-container {
    height: calc(100vh - 106px);
    overflow-y: auto;
    overflow-x: hidden;
    overflow: overlay;
}

.tab-content {
    padding: 16px;
    font-size: 14px;


    .strategy-item  {
        display: flex;
        align-items: center;
        line-height: 30px;
        margin-bottom: 10px;
        .strategy-result {
            flex: 1;
            text-align: right;
            color: var(--main-color);
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .expire {
            margin-left: 10px;
        }
        
    }
    .time-check {
        .checkbox-item {
            margin: 10px 0;
        }
    }
    .time-flex {
        display: flex;
        align-items: center;
    }
    .check-tip {
        font-size: 12px;
        color: #a9a9a9;
        flex: 1;
        text-align: right;
    }
}
.dialog-set {
    padding: 16px 20px;
    .van-space-item {

    }
}
.dialog-save {
    margin: 20px auto 0;
}


.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.van-col--8 {
    display: flex;
}
</style>